<template>
	<wd-popup custom-class="cu-modal" customStyle="width: '90vw'" lock-scroll :z-index="999" v-model="state.showDia"
		:close-on-click-modal="false">
		<view class="cu-dialog bg-white">
			<view class="cu-bar flex items-center">
				<view class="action" @tap="hideModal">取消</view>
				<!-- <text class="action" style="margin-right: 30rpx; font-size: 30rpx" @tap="makeSure">
					确定
				</text> -->
			</view>
			<view class="content">
				<view style="display:flex; align-items:center;height:60rpx; padding:10rpx 40rpx;">
					<!-- <wd-input v-model="state.queryForm.itemName" clearable @blur="onSearchInput" placeholder="任务名称" /> -->
					<wd-input v-model="state.queryForm.schemeNo" clearable @blur="onSearchInput" placeholder="方案单号"
						style="margin-left:40rpx;" />
				</view>
				<scroll-view scroll-y scroll-x class="table-container" :refresher-enabled="false"
					@scrolltolower="onScrollLower">
					<view class="search-results ">
						<table class="analysis-table flow-details">
							<tbody>
								<tr class="header">
									<!-- <th>任务名称</th> -->
									<th>方案单号</th>
									<th>方案序号</th>
									<th>产品名称</th>
									<th>产品规格</th>
								</tr>
								<tr align="center" v-for="(item, index) in state.dataList" :key="index"
									@tap="makeSure(item)">
									<!-- <td>{{ item.itemName }}</td> -->
									<td>{{ item.schemeNo }}</td>
									<td>{{ item.version }}</td>
									<td>{{ item.invName }}</td>
									<td>{{ item.invStd }}</td>
								</tr>
							</tbody>
						</table>
					</view>
				</scroll-view>

			</view>
		</view>
	</wd-popup>
</template>

<script lang="ts" setup name="selectScheme">
	import { fetchSchemeList } from '@/service/pm-record'

	const emit = defineEmits(['hideModal', 'checkLeaguer']);

	const props = defineProps({
		show: {
			type: Boolean,
			default: false,
		},
	});

	const state = reactive({
		showDia: false,
		queryForm: {
			itemName: '',
			schemeNo: '',
			reviewStatus: 2,
			closeFlag: 0,
			descs: 'create_time',
			webSql: '',
		},
		params: {
			current: 1,
			size: 20
		},
		loadMore: 'finished',
		dataList: []
	});

	watch(
		() => props.show,
		(val) => {
			state.showDia = val;
			if (val) {
				onSearchInput();
			}
		},
		{ immediate: true, deep: true },
	);


	const onSearchInput = (e ?) => {
		if (state.queryForm.itemName) {
			state.queryForm.webSql = `item_name like '${state.queryForm.itemName} '`
		}
		if (state.queryForm.schemeNo) {
			state.queryForm.webSql = `scheme_no like '${state.queryForm.schemeNo}'`
		}

		if (state.queryForm.schemeNo && state.queryForm.itemName) {
			state.queryForm.webSql = `item_name like '${state.queryForm.itemName}' and scheme_no like '${state.queryForm.schemeNo}'`
		}
		const params = {
			...state.queryForm,
			...state.params
		}
		state.loadMore = 'loading';
		fetchSchemeList(params)
			.then((res) => {
				if (state.params.current == 1) state.dataList = []
				state.dataList = state.dataList.concat(res.data.records);
				if (res.data.records.length < state.params.size) {
					state.loadMore = 'loadEnd';
				} else {
					state.loadMore = 'finished';
				}
			})
			.catch((err) => { });
	};


	const onScrollLower = (e) => {
		if (e.detail?.direction === 'bottom' && state.loadMore === "finished") {
			state.params.current++;
			onSearchInput();
		}
	}

	const hideModal = () => {
		emit('hideModal');
		state.showDia = false;
		state.queryForm.itemName = "";
		state.queryForm.schemeNo = ''
	};

	const makeSure = (item) => {
		emit('checkLeaguer', item);
		hideModal();
	};
</script>


<style scoped lang="scss">
	@import "./table.scss";

	.cu-dialog {
		width: 90vw;
		height: 80vh;
		padding: 10rpx 0;
		font-size: 26rpx;

		.cu-bar {
			// padding: 10rpx 20rpx;
			position: relative;
			align-items: center;
			justify-content: space-between;
			min-height: 50px;
			border-bottom: 1rpx solid #f1f1f1;

			.action {
				display: flex;
				align-items: center;
				justify-content: center;
				min-width: 50px;
				min-height: 50px;
				margin-right: 0;
				font-size: 30rpx;
			}
		}

		.content {
			height: calc(80vh - 220rpx);

			.table-container {
				margin-top: 30rpx;

				padding: 0 10rpx;
				box-sizing: border-box;
			}

			.search-results {
				position: relative;

				.flow-details {
					min-width: 350px;
					position: relative;

					.header {
						position: sticky;
						top: 0;
						background-color: #8a929f;
						z-index: 9;
						box-shadow: 0 6rpx 28rpx 0 #e0e0e0;
						border-bottom: 1rpx solid #dedede;
					}

					&.scroll-rigth {
						.sticky-left {
							&:after {
								content: "";
								position: absolute;
								top: 0;
								bottom: 0;
								right: 0;
								width: 1rpx;
								background-color: #dedede;
								// box-shadow: 6rpx 0 28rpx 0 #e0e0e0;
								z-index: 2;
							}

							// border-right: 1rpx solid #dedede;
						}
					}
				}
			}
		}

	}
</style>